<!DOCTYPE html>
<html class="x-admin-sm">

<head>
<meta charset="UTF-8">
<title>欢迎页面-X-admin2.2</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<link rel="stylesheet" href="../../css/font.css">
<link rel="stylesheet" href="../../css/xadmin.css">
<script src="../../lib/layui/layui.js" charset="utf-8"></script>
<script type="text/javascript" src="../../js/xadmin.js"></script>
</head>

<body>
	<div class="x-nav">
		<span class="layui-breadcrumb"> <a href="">首页</a> <a href="">演示</a>
			<a> <cite>导航元素</cite></a>
		</span> <a class="layui-btn layui-btn-small"
			style="line-height: 1.6em; margin-top: 3px; float: right"
			onclick="location.reload()" title="刷新"> <i
			class="layui-icon layui-icon-refresh" style="line-height: 30px"></i>
		</a>
	</div>
	<div class="layui-fluid">
		<div class="layui-row layui-col-space15">
			<div class="layui-col-md12">
				<div class="layui-card">
					<div class="layui-card-body ">
						<form class="layui-form layui-col-space5">
							<div class="layui-input-inline layui-show-xs-block">
								<input class="layui-input" placeholder="开始日" name="start"
									id="start">
							</div>
							<div class="layui-input-inline layui-show-xs-block">
								<select name="contrller">
									<option value="">订单状态</option>
									<option value="0">待确认</option>
									<option value="1">已确认</option>
									<option value="2">已收货</option>
									<option value="3">已取消</option>
									<option value="4">已完成</option>
									<option value="5">已作废</option>
								</select>
							</div>
							<div class="layui-input-inline layui-show-xs-block">
								<input type="text" name="username" placeholder="请输入订单号"
									autocomplete="off" class="layui-input">
							</div>
							<div class="layui-input-inline layui-show-xs-block">
								<button class="layui-btn" lay-submit="" lay-filter="sreach">
									<i class="layui-icon">&#xe615;</i>
								</button>
							</div>
						</form>
					</div>
					<div class="layui-card-body ">
						<table class="layui-table layui-form" id="data-table">

						</table>
					</div>
				</div>
			</div>
		</div>
	</div>
</body>

<script type="text/html" id="barDemo">
  		<a class="layui-btn layui-btn-xs" onclick="xadmin.open('订单详情','orderDetail?id={{d.id}}',800,400)" lay-event="edit">查看</a>
	</script>

<script>
	layui.use([ 'laydate', 'form', 'table' ], function() {
		var laydate = layui.laydate;
		var table = layui.table;

		//执行一个laydate实例
		laydate.render({
			elem : '#start' //指定元素
		});

		//执行渲染
		table.render({
			elem : '#data-table',
			url : "findOrdersPage",
			method : "POST",
			page : true,
			cols : [ [
					{
						type : 'checkbox',
						fixed : 'left'
					},
					{
						field : 'orderNumber',
						title : '订单编号'
					},
					{
						field : 'userId',
						title : '下单用户'
					},
					{
						field : 'paymentInterface',
						title : '支付方式',
						templet : function(d) {

							if (d.paymentInterface == 1) {
								return "支付宝"
							} else {
								return "微信"
							}
						}
					},
					{
						field : 'paymentStatus',
						title : '支付状态',
						templet : function(d) {

							if (d.orderStatus == 1) {
								return "未支付"
							} else {
								return "<span style='color:red'>已支付</span>"
							}
						}
					},
					{
						field : 'orderStatus',
						title : '订单状态',
						templet : function(d) {

							if (d.orderStatus == 2) {
								return "待付款";
							} else if (d.orderStatus == 3) {
								return "<span style='color:red'>待就餐</span>";
							} else if (d.orderStatus == 4) {
								return "订单完成";
							} else if (d.orderStatus == 5) {
								return "订单关闭";
							}
						}
					},
					{
						field : 'orderAmount',
						title : '订单金额',
						templet : function(d) {

							return "<span style='color:red'>￥" + d.orderAmount
									+ "<span>"
						}
					}, {
						field : 'createTime',
						title : '创建时间'
					}, {
						fixed : 'right',
						title : '操作',
						toolbar : '#barDemo',
						width : 100
					} ] ]
		//设置表头
		});
	})
</script>

</html>